<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);

            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set common drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px sans-serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // 1. Draw the pulley
        const pulleyX = 250;
        const pulleyY = 100;
        const pulleyR = 60;
        ctx.beginPath();
        ctx.arc(pulleyX, pulleyY, pulleyR, 0, 2 * Math.PI, false);
        ctx.stroke();
        // Draw the center point of the pulley
        ctx.beginPath();
        ctx.arc(pulleyX, pulleyY, 3, 0, 2 * Math.PI, false);
        ctx.fill();

        // 2. Define mass properties
        const massWidth = 45;
        const massHeight = 25;
        const mass1X = pulleyX - pulleyR;
        const mass2X = pulleyX + pulleyR;
        const massY = 250;

        // 3. Draw the cord
        ctx.beginPath();
        ctx.moveTo(mass1X, massY);
        ctx.lineTo(mass1X, pulleyY);
        ctx.arc(pulleyX, pulleyY, pulleyR, Math.PI, 0, false);
        ctx.lineTo(mass2X, pulleyY);
        ctx.lineTo(mass2X, massY);
        ctx.stroke();

        // 4. Draw the masses
        ctx.strokeRect(mass1X - massWidth / 2, massY, massWidth, massHeight);
        ctx.strokeRect(mass2X - massWidth / 2, massY, massWidth, massHeight);

        // 5. Draw force vectors
        const mass1CenterX = mass1X;
        const mass1CenterY = massY + massHeight / 2;
        const mass2CenterX = mass2X;
        const mass2CenterY = massY + massHeight / 2;
        const vectorLength = 70;

        // Forces on m1
        drawArrow(mass1CenterX, mass1CenterY, mass1CenterX, mass1CenterY - vectorLength); // Upward Force F
        drawArrow(mass1CenterX, mass1CenterY, mass1CenterX, mass1CenterY + vectorLength); // Downward Force m1g

        // Forces on m2
        drawArrow(mass2CenterX, mass2CenterY, mass2CenterX, mass2CenterY - vectorLength); // Upward Force F
        drawArrow(mass2CenterX, mass2CenterY, mass2CenterX, mass2CenterY + vectorLength); // Downward Force m2g

        // 6. Add labels
        // Mass labels (m1, m2)
        ctx.fillText('m', mass1X + massWidth / 2 + 10, mass1CenterY);
        ctx.font = '16px sans-serif';
        ctx.fillText('1', mass1X + massWidth / 2 + 25, mass1CenterY + 5);
        ctx.font = '22px sans-serif';

        ctx.fillText('m', mass2X + massWidth / 2 + 10, mass2CenterY);
        ctx.font = '16px sans-serif';
        ctx.fillText('2', mass2X + massWidth / 2 + 25, mass2CenterY + 5);
        ctx.font = '22px sans-serif';

        // Force labels (F)
        ctx.fillText('F', mass1CenterX + 10, mass1CenterY - vectorLength / 2);
        ctx.fillText('F', mass2CenterX + 10, mass2CenterY - vectorLength / 2);

        // Force labels (m1g, m2g)
        ctx.fillText('m', mass1CenterX - 55, mass1CenterY + vectorLength / 2);
        ctx.font = '16px sans-serif';
        ctx.fillText('1', mass1CenterX - 40, mass1CenterY + vectorLength / 2 + 5);
        ctx.font = '22px sans-serif';
        ctx.fillText('g', mass1CenterX - 30, mass1CenterY + vectorLength / 2);
        
        ctx.fillText('m', mass2CenterX - 55, mass2CenterY + vectorLength / 2);
        ctx.font = '16px sans-serif';
        ctx.fillText('2', mass2CenterX - 40, mass2CenterY + vectorLength / 2 + 5);
        ctx.font = '22px sans-serif';
        ctx.fillText('g', mass2CenterX - 30, mass2CenterY + vectorLength / 2);

        // 7. Draw the coordinate axis
        const axisX = 60;
        const axisY_start = 140;
        const axisY_end = 240;
        // Point O
        ctx.beginPath();
        ctx.arc(axisX, axisY_start, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('O', axisX + 10, axisY_start);
        // Axis line with arrow
        drawArrow(axisX, axisY_start, axisX, axisY_end);
        ctx.fillText('x', axisX + 10, axisY_end);

        // 8. Add the figure caption
        ctx.textAlign = 'center';
        ctx.font = '20px serif';
        ctx.fillText('Fig. 1.2.', canvas.width / 2, 420);

    </script>
</body>
</html>